<template>
  <div>
    {{ sum }}
    <button @click="add">+1</button>
    <button @click="countStore.sum--">-1</button>
  </div>
  <div>
    <ul>
      <li v-for="(item, index) in talkStore.talkList" :key="index" >{{item.content}}</li>
    </ul>
    <button @click="talkStore.addInfo">添加</button>
  </div>

</template>

<script lang="ts">
  /**
   * @Author Rin_pu
   * @Date 2025/2/19 17:59
   * @Description MyTest7
   *
   */
  export default {
    name: "MyTest7.vue"
  }
</script>

<script setup lang="ts">
  import {useCountStore} from '@/store/count'
  import {useTalkStore} from "@/store/talk";
  import {storeToRefs} from "pinia";

  const countStore = useCountStore();
  const talkStore = useTalkStore();
  // 解构赋值
  const {sum} = storeToRefs(countStore);
  console.log(sum);

  function add() {
    // // 第一种写法
    // countStore.sum++;
    // 第二种写法
    // countStore.$patch({
    //   sum: 10
    // })
    // 第三种
    // countStore.increment()
    sum.value++;
  }

  countStore.$subscribe((mutation, state) => {
    console.log(mutation, state);
  })

  talkStore.$subscribe((mutation, state) => {
    localStorage.setItem('talk', JSON.stringify(state.talkList));
  })
</script>

<style scoped>

</style>